<style lang="scss" scoped>
.infosend-module {
  margin-top: 1.25rem;
  .table-show table {
    .ctc textarea {
      width: 100%;
      margin: 0.25rem 0;
    }
    tr.apply-ctc {
      border: none;
    }
    input {
      height: 1rem;
      width: 100%;
      line-height: 1rem;
      text-align: right;
      outline: none;
      border: none;
      vertical-align: middle;
      color: #999;
    }
    textarea {
      height: 2.75rem;
      resize: none;
      text-indent: 0.1rem;
      outline: none;
      border: none;
      -webkit-user-select: auto;
    }
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #999;
    }
  }
}
.operation {
  border: none;
  position: fixed;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 1.2rem;
  bottom: 0;
  background: #fafafa;
  z-index: 200;
  .button {
    margin: 0 0.4rem;
  }
}
</style>
<template>
    <div>
        <headTop :theRouter="therouter"></headTop>
        <div class="infosend-module">
            <div class="table-show">
                <table>
                    <tbody>
                        <tr>
                            <td class="column">电站名称</td>
                            <td class="ctc">
                                <group>
                                    <selector placeholder="请选择电站名称" v-model="formList.powerStationName" direction="rtl" :options="powerStationList" @on-change="onChange"></selector>
                                </group>
                            </td>
                        </tr>
                        <tr>
                            <td class="column">电站位置</td>
                            <td class="ctc">
                                <input placeholder="请填写电站位置" v-model="formList.powerStationPosition" type="text">
                            </td>
                        </tr>
                        <tr>
                            <td class="column">申请开始时间</td>
                            <td class="ctc">
                                <group>
                                    <datetime v-model="formList.applyStartTime"></datetime>
                                </group>
                            </td>
                        </tr>
                        <tr>
                            <td class="column">申请结束时间</td>
                            <td class="ctc">
                                <group>
                                    <datetime v-model="formList.applyEndTime"></datetime>
                                </group>
                            </td>
                        </tr>
                        <tr>
                            <td class="column">申请人</td>
                            <td class="ctc">
                                <input placeholder="请填写申请人" v-model="formList.applyPerson" type="text">
                            </td>
                        </tr>
                        <tr>
                            <td class="column">联系方式</td>
                            <td class="ctc">
                                <input placeholder="请填写联系方式" v-model="formList.applyPhone" type="text">
                            </td>
                        </tr>
                        <tr>
                            <td class="column">申请原因</td>
                            <td class="ctc">
                                <group>
                                    <selector placeholder="请选择申请原因" v-model="formList.applyFor" direction="rtl" :options="applyForList"></selector>
                                </group>
                            </td>
                        </tr>
                        <tr class="apply-ctc">
                            <td class="column" colspan="2">申请内容</td>
                        </tr>
                        <tr>
                            <td class="ctc" colspan="2">
                                <textarea v-model="formList.applyContent" name="" id="" placeholder="请填写申请内容" contenteditable="true"></textarea>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="operation">
            <div class="button" @click="submit">提交</div>
        </div>
    </div>
</template>
<script>
import { BASEURL } from "./../../api/api";
import axios from "axios";
import headTop from "./../common/header";
import { Group, Selector, Datetime } from "vux";
import { constants } from 'zlib';
export default {
  name: "infonewadd",
  components: {
    headTop,
    Group,
    Selector,
    Datetime
  },
  mounted() {
    //选项初始化
    this.init();
  },
  computed: {
    therouter: function() {
      return this.$route;
    }
  },
  data() {
    return {
      powerStationList: [],
      powerStation:[],
      hy_id: null,
      hy_code: null,
      applyForList: [
        { key: "水量过小", value: "水量过小" },
        { key: "检修", value: "检修" },
        { key: "水毁事故", value: "水毁事故" },
        { key: "其他", value: "其他" },
      ],
      formList: {
        powerStationName: null,
        applyFor: null,
        powerStationPosition: null,
        applyStartTime: "请选择开始时间",
        applyEndTime: "请选择结束时间",
        applyPerson: null,
        applyPhone: null,
        applyContent: null
      }
    };
  },
  methods: {
    init() {
      let _self = this;
      axios.get(BASEURL + "getEmpListTwo", {
          params: {
            areaCode: window.localStorage.getItem('ORG_REGION')
          }
        }).then(res => {
          _self.powerStation = res.data.empList;
          for(let i =0;i<res.data.empList.length ;i++){
              let obj = {};
              obj.key = res.data.empList[i].hy_name
              obj.value = res.data.empList[i].hy_name
              _self.powerStationList.push(obj)
          }
        }).catch(error => {
          console.log(error);
        });
    },
    onChange(val){
       let _self = this;
       for(let i = 0;i<_self.powerStation.length;i++){
           if(_self.powerStation[i].hy_name==val){
               _self.formList.powerStationPosition = _self.powerStation[i].com_location;
               _self.index = i;
               _self.hy_id = _self.powerStation[_self.index].hy_id;
               _self.hy_code = _self.powerStation[_self.index].hy_code;
               break;
           }
       }
    },
    submit() {
      let _self = this;
      if(_self.formList.powerStationName==null||_self.formList.powerStationName== ''){
          _self.$Message.warning('请选择电站名称！');
          return false;
      }
      if(_self.formList.powerStationPosition==null||_self.formList.powerStationPosition==''){
          _self.$Message.warning('请填写电站位置！');
          return false;
      }
      if(_self.formList.applyStartTime=='请选择开始时间'||_self.formList.applyStartTime==''){
          _self.$Message.warning('请选择开始时间！');
          return false;
      }
      if(_self.formList.applyEndTime=='请选择结束时间'||_self.formList.applyEndTime==''){
          _self.$Message.warning('请选择结束时间！');
          return false;
      }
      if(_self.formList.applyPerson==null||_self.formList.applyPerson==''){
          _self.$Message.warning('请填写申请人！');
          return false;
      }
      if(_self.formList.applyPhone==null||_self.formList.applyPhone==''){
          _self.$Message.warning('请填写联系方式！');
          return false;
      }
      if(isNaN(_self.formList.applyPhone*1)||_self.formList.applyPhone==''){
          _self.$Message.warning('请填写正确的联系方式！');
          return false;
      }
      if(_self.formList.applyFor==null||_self.formList.applyFor==''){
          _self.$Message.warning('请选择申请原因！');
          return false;
      }
      if(_self.formList.applyContent==null||_self.formList.applyContent==''){
          _self.$Message.warning('请先写申请内容！');
          return false;
      }
      axios.get(BASEURL + "saveApply", {
          params: {
            hy_id: _self.hy_id,
            hy_code: _self.hy_code,
            hy_name: _self.formList.powerStationName,
            hy_location: _self.formList.powerStationPosition,
            start_time: _self.formList.applyStartTime,
            end_time: _self.formList.applyEndTime,
            applicant: _self.formList.applyPerson,
            application: _self.formList.applyFor,
            content: _self.formList.applyContent,
            telephone: _self.formList.applyPhone
          }
        })
        .then(res => {
          _self.$Message.success(res.data.message);
          _self.$router.push({ path: "/infoaudit" });
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>


